<template>
	<view>
		<!-- bindsubmit="formSubmit" bindreset="formReset"-->
		<form @reset="formReset" @submit="formSubmit">
			<view>
				<view class="cu-form-group">
					<view class="title">*员工编码</view>
					<input class="inpt" v-model="nowStraffInfo.OperatorCode"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">*员工名称</view>
					<input class="inpt" v-model="nowStraffInfo.OperatorName"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">所属部门</view>
					<input class="inpt" disabled="true" placeholder="-单击<所属部门>" :value="nowStraffInfo.DepartmentName" @tap="DepartmentNamerModal"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">电话号码</view>
					<input class="inpt" v-model="nowStraffInfo.Photo"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">*性别</view>
					<input class="inpt" :value="nowStraffInfo.Gender==1?'男':nowStraffInfo.Gender==''?'':'女'" @tap="GenderModal"  disabled=""></input>
				</view>
				<view class="cu-form-group">
					<view class="title">身份证号</view>
					<input class="inpt" v-model="nowStraffInfo.IDCard"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">地址</view>
					<input class="inpt" v-model="nowStraffInfo.Address"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">*是否操作员</view>
					<input class="inpt" :value="nowStraffInfo.IsOperator+''=='true'?'是':nowStraffInfo.IsOperator+''=='false'?'否':''" @tap="OpModal"  disabled=""></input>
				</view>
				<view class="cu-form-group">
					<view class="title">*是否收银员</view>
					<input class="inpt" :value="nowStraffInfo.IsCashier+''=='true'?'是':nowStraffInfo.IsCashier+''=='false'?'否':''" @tap="OpIsCashierModal"  disabled=""></input>
				</view>
				<view class="cu-form-group">
					<view class="title">登录密码</view>
					<input class="inpt" v-model="nowStraffInfo.PossWord"></input>
				</view>
				<view class="cu-form-group">
					<view class="title">*是否停用</view>
					<input class="inpt" :value="nowStraffInfo.IsStop+''=='true'?'是':nowStraffInfo.IsStop+''=='false'?'否':''" @tap="tfModal" disabled=""></input>
				</view>
			</view>
			<view class="bottom">
				<button form-type="reset">清空</button>
				<button form-type="submit">{{type==0?'修改':'新增'}}</button>
			</view>
		</form>
		<!--部门弹框-->
		<view class="cu-modal" :class="showDPmodle?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="cuIcon-home content">请选择所属部门</view>
					<view class="action" @tap="hideModal(0)">
						<text class="cuIcon-close text-blue"></text>
					</view>
				</view>
				<radio-group class="block">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in DPList" :key="index">
							<label class="flex justify-between align-center flex-sub" :data-index="index" @tap="DPChange(index)">
								<view class="title1">{{item.DepartmentName}}</view>
								<radio class="round" :class="nowStraffInfo.DepartmentName+''==item.DepartmentName?'checked':''"  :value="item.DepartmentID" :checked="nowStraffInfo.DepartmentName+''==item.DepartmentName"></radio>
								<!-- <jiuaiCheckbox @change='changeBox' :value="item.value" :checked="item.checked"></jiuaiCheckbox> -->
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<!--性别弹窗-->
		<view class="cu-modal" :class="showSEXmodle?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="cuIcon-home content">请选择性别</view>
					<view class="action" @tap="hideModal(1)">
						<text class="cuIcon-close text-blue"></text>
					</view>
				</view>
				<radio-group class="block" @change="SEXChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in SEXList" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="title1">{{item.SEXName}}</view>
								<radio class="round" :class="nowStraffInfo.Gender+''==item.type ?'checked':''"  :value="item.type+''" :checked="nowStraffInfo.Gender+''==item.type"></radio>
								<!-- <radio class="round" :class="nowStraffInfo.Gender+''==item.type?'checked':''"  :value="item.type+''"></radio> -->
								<!-- <jiuaiCheckbox @change='changeBox' :value="item.value" :checked="item.checked"></jiuaiCheckbox> -->
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<!--是否停用-->
		<view class="cu-modal" :class="showStopmodle?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="cuIcon-home content">请选择是否停用</view>
					<view class="action" @tap="hideModal(2)">
						<text class="cuIcon-close text-blue"></text>
					</view>
				</view>
				<radio-group class="block" @change="StopChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in STOPList" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="title1">{{item.Name}}</view>
								<radio class="round"  :class="nowStraffInfo.IsStop+''==item.type ?'checked':''"  :value="item.type+''" :checked="nowStraffInfo.IsStop+''==item.type"></radio>
								<!-- <jiuaiCheckbox @change='changeBox' :value="item.value" :checked="item.checked"></jiuaiCheckbox> -->
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
		<!--是否操作员-->
		<view class="cu-modal" :class="showOpmodle?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="cuIcon-home content">请选择是否操作员</view>
					<view class="action" @tap="hideModal(3)">
						<text class="cuIcon-close text-blue"></text>
					</view>
				</view>
				<radio-group class="block" @change="OpChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in OpList" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="title1">{{item.Name}}</view>
								<radio class="round" :class="nowStraffInfo.IsOperator+''==item.type ?'checked':''" :checked="nowStraffInfo.IsOperator+''==item.type" :value="item.type+''"></radio>
								<!-- <jiuaiCheckbox @change='changeBox' :value="item.value" :checked="item.checked"></jiuaiCheckbox> -->
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>

		<view class="cu-modal" :class="showCashierOpmodle?'show':'hide'">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="cuIcon-home content">请选择是否收银员</view>
					<view class="action" @tap="hideModal(4)">
						<text class="cuIcon-close text-blue"></text>
					</view>
				</view>
				<radio-group class="block" @change="OpCashier">
					<view class="cu-list menu text-left">
						<view class="cu-item" v-for="(item,index) in OpCashierList" :key="index">
							<label class="flex justify-between align-center flex-sub">
								<view class="title1">{{item.Name}}</view>
								<radio class="round" :class="nowStraffInfo.IsCashier+''==item.type ?'checked':''" :checked="nowStraffInfo.IsCashier+''==item.type" :value="item.type+''"></radio>
								<!-- <jiuaiCheckbox @change='changeBox' :value="item.value" :checked="item.checked"></jiuaiCheckbox> -->
							</label>
						</view>
					</view>
				</radio-group>
			</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/syApis/syDa/syDa.js'
	import * as Api1 from '@/syApis/syBb/apis.js'
	export default {
		data() {
			return {
				IsStop: '',
				PossWord: '',
				IsOperator: '',
				Address: '',
				IDCard: '',
				OperatorName: '',
				OperatorCode: '',
				Gender: '',
				DepartmentName: '',
				Photo: '',
				//部门弹框
				showDPmodle: false,
				DPList: [],
				radio: '',
				//性别
				showSEXmodle: false,
				SEXList: [{
					SEXName: "女",
					type:"0"
				}, {
					SEXName: "男",
					type:"1"
				}],
				showStopmodle: false,
				showOpmodle: false,
				STOPList: [{
						Name: "否",
						type:"false"
					},
					{
						Name: "是",
						type:"true"
					}
				],
				OpList: [{
						Name: "否",
						type:"false"
					},
					{
						Name: "是",
						type:"true"
					}
				],
				OpCashierList: [{
						Name: "否",
						type:"false"
					},
					{
						Name: "是",
						type:"true"
					}
				],
				type: 0,
				OperatorID: "",
				IsCashier:"",
				showCashierOpmodle:false,
				isChange:false,
				nowStraffInfo:{
					OperatorCode:"",
					OperatorName:"",
					DepartmentName:"",
					Photo:"",
					Gender:"0",//性别
					IDCard:"",
					Address:"",
					IsOperator:"false",//操作员
					PossWord:"",
					IsStop:"false",//是否停用
					IsCashier:"false",
					OperatorID:""
				}
			}
		},
		onLoad(options) {
			let type = options.type;
			this.type = options.type;
			//如果是修改赋值修改的信息
			if (type == 0) {
				let nowStraffInfo = JSON.parse(options.nowStraffInfo);
				this.nowStraffInfo = nowStraffInfo;
				console.log(nowStraffInfo);
				// this.OperatorCode = nowStraffInfo.OperatorCode;
				// this.OperatorName = nowStraffInfo.OperatorName;
				// this.DepartmentName = nowStraffInfo.DepartmentName;
				// this.Photo = nowStraffInfo.Photo;
				// this.Gender = nowStraffInfo.Gender == 1 ? "男" : "女";
				// this.IDCard = nowStraffInfo.IDCard;
				// this.Address = nowStraffInfo.Address;
				// this.IsOperator = nowStraffInfo.IsOperator ? '是' : '否';
				// this.PossWord = nowStraffInfo.PossWord;
				// this.IsStop = nowStraffInfo.IsStop ? '是' : '否';
				// this.IsCashier = nowStraffInfo.IsCashier == 1 ? '是' : '否';
				// this.OperatorID = nowStraffInfo.OperatorID;
				this.isChange = true;
				// this.DepartmentName = nowStraffInfo.DepartmentName;
				uni.setNavigationBarTitle({
					title: "修改员工档案"
				})
			} else {

			}
		},

		methods: {
			formSubmit(e) {
				console.log(this.nowStraffInfo.IsCashier == "");
				if (this.nowStraffInfo.OperatorCode+"" == "") {
					Api1.showTip("员工编号不能为空")
				} else if (this.nowStraffInfo.OperatorName+"" == "") {
					Api1.showTip("员工名称不能为空")
				} else if (this.nowStraffInfo.Gender+"" == "") {
					Api1.showTip("性别不能为空")
				} else if (this.nowStraffInfo.IsOperator+"" == "") {
					Api1.showTip("是否为操作员不能为空")
				} 
				else if (this.nowStraffInfo.IsCashier+"" == "") {
					Api1.showTip("是否为收银员不能为空")
				}else if (this.nowStraffInfo.IsStop+"" == "") {
					Api1.showTip("是否停用不能为空")
				} else {
					var that = this;
					let CreateID = uni.getStorageSync("UserCode");
					let Save_M_Data_Json = {};
					if (this.type == 0) {
						Save_M_Data_Json = {
							OperatorID: that.nowStraffInfo.OperatorID,
							OperatorName: that.nowStraffInfo.OperatorName,
							OperatorCode: that.nowStraffInfo.OperatorCode,
							DepartmentID: that.nowStraffInfo.DepartmentID,
							IsStop: that.nowStraffInfo.IsStop+"",
							Photo: that.nowStraffInfo.Photo,
							Gender: that.nowStraffInfo.Gender+""  ,
							Address: that.nowStraffInfo.Address,
							IDCard: that.nowStraffInfo.IDCard,
							PossWord: that.nowStraffInfo.PossWord,
							IsOperator: that.nowStraffInfo.IsOperator+"" ,
							CreateID: CreateID,
							IsCashier: that.nowStraffInfo.IsCashier+"" == 'true' ? '1' :'0'
						}
					} else {
						Save_M_Data_Json = {
							OperatorName: that.nowStraffInfo.OperatorName,
							OperatorCode: that.nowStraffInfo.OperatorCode,
							DepartmentID: that.nowStraffInfo.DepartmentID,
							IsStop: that.nowStraffInfo.IsStop+"" ,
							Photo: that.nowStraffInfo.Photo,
							Gender: that.nowStraffInfo.Gender+"",
							Address: that.nowStraffInfo.Address,
							IDCard: that.nowStraffInfo.IDCard,
							PossWord: that.nowStraffInfo.PossWord,
							IsOperator: that.nowStraffInfo.IsOperator+"" ,
							CreateID: CreateID,
							IsCashier:  that.nowStraffInfo.IsCashier+"" == 'true' ? '1' : '0'
						}
					}
					// Save_M_Data_Json: JSON.stringify(Save_M_Data_Json),
					let data = {
						Save_M_Data_Json: JSON.stringify(Save_M_Data_Json),
					};
					var that = this;
					if (this.type == 0) {
						Api.Update_OperatorMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									Api1.showTip("登录超时");
								} else if (res.data.ErrorMsg != "") {
									Api1.showTip(res.data.ErrorMsg);
								} else {
									//console.tablele(res.data.ResultMsg)
									Api1.showTip("提交成功");
									let data = {};
									that.$eventHub.$emit('fires', data);
								}
							} else {

							}
						});
					} else {

						Api.AddOperatorMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									Api1.showTip("登录超时");
								} else if (res.data.ErrorMsg != "") {
									Api1.showTip(res.data.ErrorMsg);
								} else {
									Api1.showTip("提交成功");
									let data = {};
									that.$eventHub.$emit('fires', data);
								}
							} else {

							}
						});
					}

				}

			},
			hideModal(index) {
				if (index == 0) {
					this.showDPmodle = false;
				} else if (index == 1) {
					this.showSEXmodle = false;
				} else if (index == 2) {
					this.showStopmodle = false;
				} else if (index == 3) {
					this.showOpmodle = false;
				} else if(index==4){
					this.showCashierOpmodle = false;
				}
			},
			DepartmentNamerModal() {
				let data = {
					// DepartmentID: this.DepartmentID,
					// DepartmentName: this.DepartmentName
				}
				var that = this;
				Api.Get_DepartmentMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							// api.showTip()
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg)
						} else {
							that.DPList = res.data.ResultMsg;
							// that.DPList.DepartmentID =res.data.ResultMsg.DepartmentID
						}
					} else {
						Api.showTip("服务器连接超时")
					}
				});
				this.showDPmodle = true;
				
			},
			DPChange(e) {
				this.showDPmodle = false;
				this.nowStraffInfo.DepartmentID = this.DPList[e].DepartmentID
				this.nowStraffInfo.DepartmentName = this.DPList[e].DepartmentName
				console.log(this.DepartmentName)
			},
			GenderModal() {
				this.showSEXmodle = true;
			},
			SEXChange(e) {
				this.showSEXmodle = false;
				this.nowStraffInfo.Gender = e.detail.value;
			},
			tfModal(e) {
				this.showStopmodle = true;
			},
			OpModal(e) {
				this.showOpmodle = true;
			},
			StopChange(e) {
				this.showStopmodle = false;
				this.nowStraffInfo.IsStop = e.detail.value;
			},
			OpChange(e) {
				this.showOpmodle = false;
				this.nowStraffInfo.IsOperator = e.detail.value;
			},
			OpCashier(e) {
				this.showCashierOpmodle = false;
				console.log( e.detail.value)
				this.nowStraffInfo.IsCashier = e.detail.value;
			},
			OpIsCashierModal(e) {
				this.showCashierOpmodle = true;
				// this.IsCashier = e.detail.value;
			}
		}
	}
</script>

<style>
	.title1 {
		font-size: 15px;
	}

	.bottom {
		display: flex;
		flex: 1;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.bottom button {
		width: 50%;
		background: rgba(124, 170, 216, 1);
		color: #FFFFFF;
		border-radius: 0;
		border: 1rpx #F1F1F1;
	}
</style>
